import React, { useEffect, useState, createContext } from 'react'
import GoodsItem from './components/GoodsItem'
import MyFooter from './components/MyFooter'
import MyHeader from './components/MyHeader'
import './App.scss'
import axios from 'axios'

const arr = [
  {
    id: 1,
    goods_name:
      '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣',
    goods_img: 'https://www.escook.cn/vuebase/pics/1.png',
    goods_price: 108,
    goods_count: 1,
    goods_state: true,
  },
  {
    id: 2,
    goods_name:
      '嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮',
    goods_img: 'https://www.escook.cn/vuebase/pics/2.png',
    goods_price: 129,
    goods_count: 1,
    goods_state: true,
  },
  {
    id: 3,
    goods_name: '思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套',
    goods_img: 'https://www.escook.cn/vuebase/pics/3.png',
    goods_price: 198,
    goods_count: 1,
    goods_state: false,
  },
  {
    id: 4,
    goods_name: '思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套',
    goods_img: 'https://www.escook.cn/vuebase/pics/4.png',
    goods_price: 99,
    goods_count: 1,
    goods_state: false,
  },
  {
    id: 5,
    goods_name:
      '幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮',
    goods_img: 'https://www.escook.cn/vuebase/pics/5.png',
    goods_price: 156,
    goods_count: 1,
    goods_state: true,
  },
  {
    id: 6,
    goods_name: 'ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女',
    goods_img: 'https://www.escook.cn/vuebase/pics/6.png',
    goods_price: 142.8,
    goods_count: 1,
    goods_state: true,
  },
  {
    id: 7,
    goods_name:
      '幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套',
    goods_img: 'https://www.escook.cn/vuebase/pics/7.png',
    goods_price: 219,
    goods_count: 2,
    goods_state: true,
  },
  {
    id: 8,
    goods_name: '依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套',
    goods_img: 'https://www.escook.cn/vuebase/pics/8.png',
    goods_price: 178,
    goods_count: 1,
    goods_state: true,
  },
  {
    id: 9,
    goods_name:
      '芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬',
    goods_img: 'https://www.escook.cn/vuebase/pics/9.png',
    goods_price: 128,
    goods_count: 1,
    goods_state: false,
  },
  {
    id: 10,
    goods_name:
      'Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫',
    goods_img: 'https://www.escook.cn/vuebase/pics/10.png',
    goods_price: 153,
    goods_count: 1,
    goods_state: false,
  },
]

// todo 1. 创建Context对象, 并导出(用于提供已经消费数据)
export const Context = createContext()

export default function App() {
  // 状态提升
  const [list, setList] = useState([])

  // 定义一个修改指定数量的方法 id count
  const changeCount = (id, count) => {
    console.log(id, count)
    const newList = [...list]
    const res = newList.find((item) => item.id === id)
    res.goods_count = count

    setList(newList)
  }

  // 数据变化进行本地存储 => 副作用
  useEffect(() => {
    // todo 方式一:
    // axios.get('https://www.escook.cn/api/cart').then((res) => {
    //   console.log(res)
    //   setList(res.data.list)
    // })

    // todo 方式二:
    const getListRes = async () => {
      const res = await axios.get('https://www.escook.cn/api/cart')
      // console.log(res)
      setList(res.data.list)
    }
    getListRes()
  }, [])

  // 修改是否选中商品(修改对应项状态的方法)
  const changeState = (id) => {
    // 不可变性
    const newList = [...arr]
    const res = newList.find((item) => item.id === id)
    res.goods_state = !res.goods_state
    setList(newList)
  }

  // 选中全部
  const checkAll = (value) => {
    // console.log('触发')
    setList(
      list.map((item) => {
        return { ...item, goods_state: value }
      })
    )
  }

  return (
    <Context.Provider value={{ changeCount: changeCount }}>
      <div className="app">
        <MyHeader>购物车案例</MyHeader>

        {list.map((item) => {
          return (
            <GoodsItem
              key={item.id}
              {...item}
              changeState={changeState}
            ></GoodsItem>
          )
          // <GoodsItem
          //   key={item.id}
          //   good_img={item.goods_img}
          //   good_name={item.goods_name}
          //   ...
          // ></GoodsItem>
        })}

        <MyFooter list={list} checkAll={checkAll}></MyFooter>
      </div>
    </Context.Provider>
  )
}
